<template>
  <div class="mt20">
    <div v-if="!showPwd">
      <yd-cell-group>
        <yd-cell-item>
          <span slot="left">手机号</span>
          <yd-input slot="right" v-model="data.mobile" type="number" class="pl20" placeholder="请输入手机号码" @input="changeInput(data)"></yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">验证码</span>
          <input type="number" slot="right" v-model="data.verify_code" class="pl20" placeholder="请输入验证码" @input="changeInput(data)">
          <yd-sendcode slot="right" v-model="start" @click.native="sendCode" type="danger" second="60" initStr="发送验证码" runStr="{%s}秒后获取"></yd-sendcode>
        </yd-cell-item>
      </yd-cell-group>
      <div class="pl15 mt35">
        <yd-button size="large" type="danger" :disabled="isDisabled" @click.native="nextStep">下一步</yd-button>
        <p class="mt10 pl10">
          <yd-checkbox v-model="checkbox" @input="changeInput(data)"> 我已阅读萬蜂</yd-checkbox>
          <span class="red" @click="toPath(`/agreement`)">相关协议</span>
        </p>
      </div>
<!--
      <div class="app-download">
        <div class="app-download-btn" @click="downApp">
          <p>APP<br>下载</p>
        </div>
      </div>
  -->
    </div>
    <div v-else>
      <yd-cell-group>
        <yd-cell-item>
          <span slot="left">密码</span>
          <yd-input slot="right"  v-model="data.password" type="password" style="padding-left:34px;" @input="changePwd(data)" placeholder="请输入密码" ></yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">重复密码</span>
          <yd-input type="password" slot="right"  v-model="data.password_confirmation" class="pl20" @input="changePwd(data)" placeholder="请输入重复密码"></yd-input>
        </yd-cell-item>
      </yd-cell-group>
      <div style="color:#999;padding-left:15px;margin-top:10px;">密码长度至少6个字符，最多32个字符</div>
       <div class="pl15 mt35">
        <yd-button size="large" type="danger" :disabled="isPwd" @click.native="registeredGoods">保存</yd-button>
       </div>
    </div>
  </div>
</template>
<style scoped>
.app-download {
  width: 13%;
  position: fixed;
  bottom: 24%;
  right: 10%;
  z-index: 100;
}
.app-download .app-download-btn {
  width: 60px;
  height: 60px;
  text-align: center;
  border-radius: 100%;
  background-color: #13c2c2;
  color: #fff;
  font-size: 16px;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
}
</style>
<script>
import request from '../utils'
import CryptoJS from 'crypto-js'
export default {
  data () {
    return {
      data: {
        mobile: '',
        verify_code: '',
        password: '',
        password_confirmation: '',
      },
      start: false,
      isDisabled: true,
      isPwd: true,
      checkbox: true,
      showPwd: false,

    }
  },
  methods: {
    toPath (path) {
      this.$router.push(path)
    },
    //des加密
    encryptByDES (message, key) {
      const keyHex = CryptoJS.enc.Utf8.parse(key);
      const encrypted = CryptoJS.DES.encrypt(message, keyHex, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      });
      return encrypted.toString();
    },
    //下一步
    nextStep () {
      this.showPwd = true
    },
    changeInput (row) {
      // let reg = /^1[3465789]\d{9}$/
      // if (reg.test(row.mobile) && row.verify_code.length == 6 && this.checkbox) {
      //   this.isDisabled = false
      // } else {
      //   this.isDisabled = true
      // }
      this.isDisabled = false
    },
    changePwd (row) {
      // let reg = /^1[3456789]\d{9}$/
      // if ((row.password.length > 5 && row.password.length < 32) && (row.password_confirmation.length > 5 && row.password_confirmation.length < 32)) {
      //   this.isPwd = false
      // } else {
      //   this.isPwd = true
      // }
      this.isPwd = false
    },
    //发送验证码
    async sendCode () {
      let reg = /^1[3456789]\d{9}$/
      if (this.data.mobile == '') {
        this.$dialog.toast({ mes: '手机号不能为空', icon: 'error', timeout: 2500 });
        return;
      // } else if (!reg.test(this.data.mobile)) {
      //   this.$dialog.toast({ mes: '手机号格式错误', icon: 'error', timeout: 2500 });
      //   return;
      }
      let url = `/offline/sendRegisterSms/${this.data.mobile}`
      let result = await request.getData(url)
      if (result.code == 200) {
        this.start = true;
        this.$dialog.toast({ mes: '已发送', icon: 'success', timeout: 2500 });
      } else {
        this.$dialog.toast({ mes: result.msg, icon: 'error', timeout: 2500 });
      }
    },
    //注册
    async registeredGoods () {
      if (this.data.password != this.data.password_confirmation) {
        this.$dialog.toast({ mes: '密码跟重复密码不一致，请重新输入', icon: 'error', timeout: 2500 });
        return;
      }
      this.$dialog.loading.open('加载中...');
      let url = '/offline/register'
      let body = {
        mobile: this.data.mobile,
        code: this.data.verify_code,
        business: 'register',
        access_token: this.data.mobile,
        password: this.data.password,
        password_confirmation: this.data.password_confirmation,
        sharerId: this.$route.query.sharerId ? this.$route.query.sharerId : '',
        unionId: this.$route.query.unionId ? this.$route.query.unionId : '',
        teamFlag: this.$route.query.teamFlag ? this.$route.query.teamFlag : '',
      }
      let result = await request.post(url, body)
      if (result.code == 200) {
        this.$dialog.loading.close();
        let sharerId = this.$route.query.sharerId ? this.$route.query.sharerId : ''
        this.$router.push(`/spellGroup?sharerId=${sharerId}`)
      } else {
        this.$dialog.loading.close();
        this.$dialog.toast({ mes: result.msg, icon: 'error', timeout: 2500 });
      }
    },

    //根据终端下载App
    async downApp () {
      var u = navigator.userAgent
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
      let url = ''
      if (isAndroid) {
        url = '/api/version/get/ANDROID_URL'
      }
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isiOS) {
        url = '/api/version/get/IOS_URL'
      }
      const result = await request.getData(url)
      if (result.code == 200) {
        window.location.href = result.data.url
      }
    }
  },
}
</script>
